<template>
  <main class="page">
    <PageBanner :bg_url="page.banner" />
    <section class="section-container">
      <div class="section-wrap">
        <ul class="download list">
          <li v-for="(item,key) of list" class="list-item" :key="key">
            <a :href="item.link" download="test" class="list-item-link">
              <div class="item-top">{{item.size}}</div>
              <h2 class="item-title">{{item.title}}</h2>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </main>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "Download",
  data() {
    return {
      page: {
        banner: `background-image: url(${require("@/assets/img/download.jpg")})`
      },
      list: [
        {
          title: "Shipping Manual (including HK, Macao & Taiwan)",
          size: "667.8KB",
          link: "https://sday.design/media/upload/LargeFile/SDAY2013.pdf"
        },{
          title: "Shipping Manual (including HK, Macao & Taiwan)",
          size: "667.8KB",
          link: "https://sday.design/media/upload/LargeFile/SDAY2013.pdf"
        },{
          title: "Shipping Manual (including HK, Macao & Taiwan)",
          size: "667.8KB",
          link: "https://sday.design/media/upload/LargeFile/SDAY2013.pdf"
        },
        {
          title: "Works of SDAY 2013 (PDF format）",
          size: "11.52MB",
          link: "https://sday.design/media/upload/LargeFile/SDAY2013.pdf"
        }
      ]
    };
  }
};
</script>
<style lang="scss">
.download.list {
  li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    @media(max-width: 440px) {
      width: 100%;
    }
    a {
      position: relative;
      display: block;
      padding: 40px 40px 0;
      margin: 0 20px;
      height: 180px;
      background-color: #f5f5f5;
      &::after {
        content: "\e684";
        position: absolute;
        z-index: 5;
        right: 20px;
        bottom: 20px;
        font-family: "iconfont";
        font-size: 16px;
        line-height: 1;
        color: #2537b5;
        transition: transform 0.25s;
      }
      &:hover {
        .item-title {
          color: $primary;
        }
        &::after {
          transform: translate(2px ,4px)
        }
      }
      .item-top {
        display: inline-block;
        vertical-align: top;
        font: 300 14px/20px "Futura";
        color: gray;
      }
      .item-title {
        margin-top: 0.75em;
        font: 500 20px/1.8 "Futura";
        letter-spacing: 0.02em;
        color: #202020;
      }
      
    }
    &:nth-child(n + 3) {
        margin-top: 30px;
      }
  }
}
</style>